<template>
  <div class="flex flex-column height appointment">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
      style="border-bottom: 1px solid #f1f1f1"
    ></header-top>
    <div class="content_main">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :offset="10"
        class="list"
      >
        <div
          class="cont_top"
          @click="toAppointment"
          v-for="(item, index) in listData"
          :key="index"
        >
          <div class="top">
            <!-- <div class="top_title">{{ item.orderName }}</div> -->
            <div class="top_title">广慈太保互联网医院-肾内科</div>
            <div class="top_content" v-if="item.status==0">已取消</div>
            <div class="top_content" v-if="item.status==1">待支付 </div>
            <div class="top_content" v-if="item.status==2">已支付</div>
            <div class="top_content" v-if="item.status==3">待问诊</div>
            <div class="top_content" v-if="item.status==4">问诊中</div>
            <div class="top_content" v-if="item.status==5">已完成</div>
            <div class="top_content" v-if="item.status==6">退款中</div>
            <div class="top_content" v-if="item.status==7">已退款</div>
          </div>
          <div class="buttom">
            <div class="buttom_content">
              <div class="buttom_top">
                <span>就诊人</span>
                <i>{{ item.patientName }}</i>
              </div>
              <div class="buttom_bum">
                <span>就诊日期</span>
                <i>{{item.createTime}}</i>
              </div>
            </div>
            <div class="buttom_button">
              <div class="button_bt" @click.stop="toOrder">再次预约</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
import { getUserInfo, orderPage } from "@/api/index";
export default {
  name: "registrationDetails",
  components: {
    HeaderTop,
  },
  data() {
    return {
      userInfo: {},
      loading: false,
      finished: false,
      page: 1,
      size: 10,
      listData: [],
      TxtHeader: {
        //头部设置
        background: "#fff", //头部背景颜色
        color: "#0a0a0a", //头部中间文字颜色
        title: "预约挂号详情",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#000",
        },
      },
    };
  },
  created() {
    this.getUserInfoFn();
  },
  methods: {
    onLoad() {
      if (this.userInfo.userId) {
        this.orderPageFn();
        this.page++;
        this.loading = false;
        this.finished = true;
      }
    },
    orderPageFn() {
      let param = {
        current: this.page,
        doctorChannel: 0,
        inquiryMode: 1,
        inquiryType: 2,
        patientId: "",
        size: this.size,
        status: "",
        userId: this.userInfo.userId,
      };
      orderPage(param).then((res) => {
        this.listData = res.body.records;
      });
    },
    getUserInfoFn() {
      getUserInfo().then((res) => {
        this.userInfo = res.body;
        this.onLoad();
      });
    },
    toAppointment() {
      this.$router.push("/appointment");
    },
    toOrder() {
      localStorage.setItem("orderType", "3");
      this.$router.push("/order");
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.appointment {
  .content_main {
    height: 100% - 0.5rem;
    overflow-y: auto;
    padding-top: 0.1rem;
    .cont_top {
      padding: 0.16rem 0.18rem 0.16rem 0.3rem;
      background: #fff;
      margin-bottom: 0.2rem;
      .top {
        padding-bottom: 0.1rem;
        display: flex;
        font-size: 0.14rem;
        border-bottom: 0.01rem solid #eeeeee;
        margin-bottom: 0.06rem;
        .top_title {
          color: #333;
        }
        .top_content {
          color: #7d7d7d;
          margin-left: auto;
        }
      }
      .buttom {
        display: flex;
        .buttom_content {
          .buttom_top {
            font-size: 0.14rem;
            margin-bottom: 0.1rem;
            span {
              color: #666;
            }
            i {
              margin-left: 0.34rem;
              color: #333;
            }
          }
          .buttom_bum {
            font-size: 0.14rem;
            span {
              color: #666;
            }
            i {
              margin-left: 0.2rem;
              color: #333;
            }
          }
        }
        .buttom_button {
          margin-left: auto;
          background: url("../../assets/icon_foot.png") no-repeat center;
          width: 0.7rem;
          height: 0.26rem;
          border-radius: 0.26rem;
          line-height: 0.26rem;
          text-align: center;
          font-size: 0.12rem;
          margin-top: 0.18rem;
          color: #fff;
        }
      }
    }
  }
}
</style>
